<template>
  <div class="drawer-side bg-base-200">
    <label for="my-drawer-2" class="drawer-overlay"></label>
    <aside
      class="min-h-screen z-20 flex h-full flex-shrink-0 flex-col transition-all duration-300 w-[10rem]"
    >
      <div class="py-6 flex items-center px-5">
        <div class="flex flex-col items-center gap-2">
          <span class="text-lg font-semibold text-celter">学词乐</span>
          <img src="/assets/favicon.ico" class="w-10" />
        </div>
      </div>
      <div class="py-4 flex-1 overflow-y-auto">
        <div class="px-3 py-2 text-xs font-medium uppercase tracking-wider">
          导航菜单
        </div>
        <div class="space-y-1 px-2">
          <div
            v-for="(item, index) in menus"
            :key="index"
            @click="goTo(item.to)"
            class="flex items-center text-[0.95rem] px-3 py-3 font-medium cursor-pointer"
            :class="[
              isRouteActive(item.to)
                ? 'text-primary'
                : 'hover:bg-gray-900 hover:text-white',
            ]"
          >
            <component
              :is="item.icon"
              class="w-5 h-5"
              :class="[isRouteActive(item.to) ? 'text-primary' : '']"
            />
            <span class="ml-3">{{ item.name }}</span>
          </div>
          <div
            v-if="user"
            class="flex items-center text-[0.95rem] font-medium rounded-md px-3 py-2.5 cursor-pointer"
            @click="isUser = true"
          >
            <component :is="BackspaceIcon" class="w-5 h-5" />
            <span class="ml-3">退出</span>
          </div>
        </div>
      </div>
      <div class="text-center text-xs py-2 text-gray-500"></div>
    </aside>
  </div>

  <div class="fixed bottom-0 left-0 right-0 z-50 md:hidden" v-if="isMenuOpen">
    <!-- 折叠菜单 -->
    <div
      class="collapse collapse-arrow bg-base-100 rounded-t-xl shadow-xl collapse-open"
    >
      <input type="checkbox" v-model="isMobile" class="min-h-0" />
      <div class="collapse-content p-4 bg-gray-50">
        <div class="flex flex-col gap-2 pb-[5rem]">
          <div
            class="flex items-center gap-2 p-2 rounded-lg hover:bg-base-200 cursor-pointer"
            v-for="(item, index) in menus"
            :key="index"
            @click="(isMenuOpen = false), goTo(item.to)"
          >
            <component
              :is="item.icon"
              class="w-5 h-5"
              :class="[isRouteActive(item.to) ? 'text-primary' : '']"
            />
            <span
              class="text-sm font-medium"
              :class="[
                isRouteActive(item.to)
                  ? 'text-primary'
                  : 'hover:bg-gray-900 hover:text-white',
              ]"
              >{{ item.name }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="dock dock-sm" @click="toggleMenu">
      <button>
        <Bars4Icon class="w-5 h-5" />
        <span class="dock-label">菜单</span>
      </button>
    </div>
  </div>
  <User :isOpen="isUser" @close="isUser = false" v-if="isUser" />
</template>

<script setup>
import {
  BackspaceIcon,
  BookOpenIcon,
  UserCircleIcon,
  ExclamationCircleIcon,
  Cog6ToothIcon,
  WrenchIcon,
  Bars4Icon,
} from "@heroicons/vue/24/solid";
import { sidebarClick } from "~/composables/common/sidebar";
import { userSet } from "@/composables/common/user";
import { isMobile } from "~/composables/common/mobile";
import { ref, onMounted } from "vue";
const isUser = ref(false);
const { getUserData } = userSet();
const { isRouteActive, goTo } = sidebarClick();
const user = ref(null);
onMounted(() => {
  user.value = getUserData();
});
const isMenuOpen = ref(false);
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};
const menus = [
  {
    icon: UserCircleIcon,
    name: "我的",
    to: "/user-course",
  },
  {
    icon: BookOpenIcon,
    name: "单词本",
    to: "/course",
  },
  {
    icon: BookOpenIcon,
    name: "句子本",
    to: "/sentence",
  },
  {
    icon: ExclamationCircleIcon,
    name: "错题本",
    to: "/errbook",
  },
  {
    icon: Cog6ToothIcon,
    name: "设置",
    to: "/settings",
  },
  {
    icon: WrenchIcon,
    name: "反馈",
    to: "/feedback",
  },
];
</script>
